<template>
  <div class="Oracle">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="数据源名称" prop="name"  @input="changeName">
        <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="服务器" prop="server">
        <el-input v-model="ruleForm.server"></el-input>
    </el-form-item>
    <el-form-item label="端口" prop="port">
        <el-input v-model="ruleForm.port"></el-input>
    </el-form-item>
    <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
    </el-form-item>
    <el-form-item label="SID" prop="sid">
        <el-input v-model="ruleForm.sid"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">连接</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Oracle',
  //  props: {
  //     childname: {
  //         type: Object,
  //         default: {}
  //     }
  // },
   data () {
    return {
      childname:{},
        rules: {
        name: [
            { required: true, message: '请输入数据源名称', trigger: 'blur' },
            
          ],
          server: [
            { required: true, message: '请输入服务器', trigger: 'blur' },
            
          ],
          port: [
            { required: true, message: '请输入端口', trigger: 'blur' },
            
          ],
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            
          ],
          sid: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            
          ],
      },
      ruleForm:{
        name:"",
        server:'',
        port:'',
        username:'',
        password:'',
        sid:''
      },
    }
  },
  methods:{
      initData(){
      this.childname=this.$store.state.formType
      if(this.childname.id){
         this.ruleForm.id=this.childname.id
      }
      this.ruleForm.conName=this.childname.conName
      this.ruleForm.conHost=this.childname.conHost
      this.ruleForm.conPost=this.childname.conPost
      this.ruleForm.conPasswd=this.childname.conPasswd
      this.ruleForm.conAccount=this.childname.conAccount
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            this.$emit('childevent',true);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      changeName(e){
        console.log(e);
        this.$store.state.formType.name=e;
        this.$emit('childevent',e);
      }
  }
}
</script>

<style>
.Oracle{
    width: 60%;
}
</style>